<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="分享标题：" prop="title">
        <el-input type="text" v-model="form.title" placeholder="请输入文案描述" />
      </el-form-item>
      <el-form-item label="分享内容：" prop="content">
        <el-input type="textarea" v-model="form.content" placeholder="请输入文案描述" />
      </el-form-item>
      <el-form-item label="上传图片：" prop="pics" inline>
        <div style="display: flex;align-items: center;">
          <div style="position: relative;" v-if="fileValue" v-for="(item, index) in fileValue" :key="index">
            <img :src="item" style="margin-right: 10px;margin-bottom: 10px" class="avatar">
            <span style="color: #f00;position: absolute;top: -15px;right: 5px;cursor: pointer;" @click="deleteFile(index)">X</span>
          </div>
          <el-upload
              class="avatar-uploader"
              :action="uploadAction"
              :limit="9"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

      </el-form-item>
      <el-form-item label="分享链接：" prop="url">
        <el-input type="text" v-model="form.url" placeholder="请输入分享链接" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { getTaskLinkShareInfo, saveTaskLinkShareInfo } from "@/api/shuiyin/shuiyin";

export default {
  name: "LinkShare",
  props: {
    taskId: {
      type: String
    }
  },
  data() {
    return {
      uploadAction: process.env.VUE_APP_BASE_API + "/common/ossUpload",
      // 图文分享参数
      form: {},
      // 文件接收数组
      fileValue: []
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    /** 查询租户管理列表 */
    getInfo() {
      getTaskLinkShareInfo(this.taskId).then(response => {
        if (response.data) {
          this.form = response.data;
          this.fileValue = this.form.pics ? this.form.pics.split(',') : [];
        } else {
          this.form = {
            title: '',
            content: '',
            pics: '',
            url: '',
            taskId: this.taskId
          }
          this.fileValue = [];
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.pics = this.fileValue.join(',');
          saveTaskLinkShareInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getInfo();
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图标大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.fileValue.push(res.data);
    },
    deleteFile(index) {
      this.fileValue.splice(index, 1)
    },
    goBack() {
      this.$router.push("/member/task");
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>
